<template>
    <div class="dialog" v-if="configure">
        <div style="margin-top: 20px">
            <el-form label-width="100px">
                <el-form-item
                    label-width="76px"
                    label="资源类型:"
                    prop="projectname"
                >
                    <el-button
                        size="small"
                        v-for="(item, index) in types"
                        :key="index"
                        v-show="!editFlag || typeIndex == index"
                        @click="typeIndex = index"
                        :type="typeIndex == index ? 'primary' : ''"
                        plain
                        >{{ item.name }}</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>{{  types[typeIndex].name }}</div>
            </div>
            <div
                v-show="typeIndex == 0"
                style="padding: 20px 20px; width: 100%"
            >
                <el-form
                    :model="form"
                    :rules="rules"
                    ref="form"
                    label-width="120px"
                >
                    <el-form-item
                        label="可用域:"
                        v-show="taskName != '云服务商处理'"
                        v-if="form.availableDomain"
                    >
                        <el-select
                            v-model="form.availableDomain"
                            placeholder="请选择"
                            size="mini"
                            style="width: 200px"
                        >
                            <el-option
                                v-for="item in configure.available_domain"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item v-if="taskName == '云服务商处理'" label="IP">
                        <el-input
                            style="width: 300px"
                            placeholder="请输入IP"
                            v-model="form.specifyIp"
                        />
                    </el-form-item>
                    <el-form-item
                        v-if="taskName == '云服务商处理'"
                        label="序列号"
                    >
                        <el-input
                            style="width: 300px"
                            placeholder="请输入序列号"
                            v-model="form.sn"
                        />
                    </el-form-item>

                    <!-- <el-form-item label="规格分类:" v-if="taskName != '云服务商处理'">
            <div style="display: flex;padding-top: 8px;">
              <el-radio-group v-model="form.cloudFlavorCode" @change="cloudFlavorCodes">
                <el-radio v-for="(item,index) in configure.codeList" :key="index" :label="item.specCode">
                  {{item.specName}}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item> -->
                    <el-form-item
                        label="规格:"
                        v-if="taskName != '云服务商处理'"
                        prop="Specifications"
                    >
                       <el-select v-model="form.Specifications" placeholder="请选择规格" size="mini" @change="ChangeSpecifications" style="width: 200px;">
                           <el-option v-for="item in configure.SpecificationsList"
                               :key="item.specName"
                               :label="item.specName"
                               :value="item.specName">
                           </el-option>
                       </el-select>
                       <div v-if="form.Specifications=='自定义'">
                         <el-input
                             size="mini"
                             style="width: 60px; margin: 10px"
                             maxlength="7"
                             v-model="form.cpuNumber"
                         ></el-input
                         >核
                         <el-input
                             size="mini"
                             style="width: 60px; margin: 1px"
                             maxlength="7"
                             v-model="form.memorySize"
                         ></el-input
                         >G
                       </div>
                    </el-form-item>
                    <el-form-item
                        label="系统盘:"
                        v-show="taskName != '云服务商处理'"
                        v-if="form.osDisk"
                    >
                        <div style="display: flex">
                            <el-select
                                v-model="form.osDisk.diskServerCode"
                                placeholder="请选择"
                                size="mini"
                                style="width: 200px"
                            >
                                <el-option
                                    v-for="item in configure.storage_type"
                                    :key="item.code"
                                    :label="
                                        item.serviceName
                                            ? item.serviceName
                                            : item.dictLabel
                                    "
                                    :value="item.code"
                                >
                                </el-option>
                            </el-select>
                            <el-select
                                v-model="form.osDisk.dataDiskSize"
                                placeholder="请选择"
                                size="mini"
                                style="width: 200px; margin: 0 10px"
                            >
                                <el-option
                                    v-for="item in [160, 100]"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                >
                                </el-option> </el-select
                            >GB
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="操作系统:"
                        v-if="taskName != '云服务商处理'"
                        prop="osType"
                    >
                        <el-select
                            style="width: 200px"
                            v-model="form.osType"
                            @change="cascaderChange($event,'form')"
                            placeholder="请选择操作系统"
                            size="mini"
                        >
                            <el-option
                                v-for="item in this.configure.czxtList"
                                :key="item.serviceNumber"
                                :label="item.serviceName"
                                :value="item.serviceNumber"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="操作系统版本:"
                        v-if="taskName != '云服务商处理'"
                        prop="osServerCode"
                    >
                        <!-- 请选择操作系统版本 -->
                        <el-select
                            v-model="form.osServerCode"
                            @change="ChangeCzxtVersion($event, 'form')"
                            placeholder="请选择操作系统版本"
                            size="mini"
                            style="width: 200px;"
                        >
                            <el-option
                                v-for="item in this.CzxtVersion"
                                :key="item.code"
                                :label="item.serviceName"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="数据盘:"
                        v-if="taskName != '云服务商处理'"
                    >
                        <div>
                            <span
                                >你已选择<span style="color: #e83112">{{
                                    form.disks.length
                                }}</span
                                >块，还可以选择<span style="color: #e83112">{{
                                    16 - form.disks.length
                                }}</span
                                >块</span
                            >
                            <div
                                v-for="(item, index) in form.disks"
                                :key="index"
                                style="
                                    margin-top: 10px;
                                    display: flex;
                                    line-height: 28px;
                                "
                            >
                                <a @click="form.disks.splice(index, 1)"
                                    ><i class="el-icon-remove"></i
                                ></a>
                                <el-select
                                    v-model="item.diskServerCode"
                                    placeholder="请选择"
                                    size="mini"
                                    style="width: 160px"
                                >
                                    <el-option
                                        v-for="it in configure.ccList"
                                        :key="it.code"
                                        :label="it.serviceName"
                                        :value="it.code"
                                    >
                                    </el-option>
                                </el-select>
                                <el-input
                                    size="mini"
                                    maxlength="7"
                                    style="width: 150px; margin-left: 20px"
                                    v-model="item.dataDiskSize"
									@blur="inputNumber($event)"
                                ></el-input
                                >GB
                            </div>
                            <div
                                style="
                                    margin: 10px 0;
                                    display: flex;
                                    line-height: 28px;
                                "
                            >
                                <a
                                    v-show="form.disks.length < 16"
                                    @click="
                                        form.disks.push({
                                            diskServerCode:
                                                configure.ccList[0].code,
                                            dataDiskSize: 500,
                                        })
                                    "
                                >
                                    <i
                                        class="el-icon-circle-plus"
                                        style="color: #3a8dfd"
                                    ></i>
                                </a>
                                <span v-show="form.disks.length < 16"
                                    >增加一块数据盘</span
                                >
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item
                        v-show="!editFlag"
                        label="主机别名:"
                        prop="instanceName"
                        v-if="taskName != '云服务商处理'"
                    >
                        <el-input
                            style="width: 200px"
                            placeholder="请输入"
                            v-model="form.instanceName"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        v-if="!editFlag"
                        label="数量(1~50):"
                        prop="instanceNum"
                        v-show="taskName != '云服务商处理'"
                    >
                        <el-input
                            style="width: 200px"
                            size="mini"
                            type="number"
                            min="1"
                            max="50"
                            placeholder="请输入申请的服务器数量"
                            v-model="form.instanceNum"
                        >
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div
                v-show="typeIndex == 1"
                style="padding: 20px 20px; width: 100%"
            >
                <el-form
                    :model="ljsform"
                    :rules="ljsrules"
                    ref="ljsform"
                    label-width="120px"
                >
                    <el-form-item v-if="taskName == '云服务商处理'" label="IP">
                        <el-input
                            style="width: 300px"
                            placeholder="请输入IP"
                            v-model="ljsform.specifyIp"
                        />
                    </el-form-item>
                    <el-form-item
                        v-if="taskName == '云服务商处理'"
                        label="序列号"
                    >
                        <el-input
                            style="width: 300px"
                            placeholder="请输入序列号"
                            v-model="ljsform.sn"
                        />
                    </el-form-item>

                    <el-form-item
                        label="可用域:"
                        v-if="taskName != '云服务商处理'"
                    >
                        <el-select
                            v-model="ljsform.availableDomain"
                            placeholder="请选择"
                            size="mini"
                            style="width: 200px"
                        >
                            <el-option
                                v-for="item in configure.available_domain"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="资源类型:"
                        v-if="taskName != '云服务商处理'"
                    >
                        <div style="display: flex; padding-top: 8px">
                            <el-radio-group v-model="ljsform.cloudFlavorCode">
                                <el-radio
                                    style="margin-bottom: 10px"
                                    v-for="(item, index) in configure.wlfwqList"
                                    :key="index"
                                    :label="item.code"
                                    >{{ item.serviceName }}</el-radio
                                >
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="规格:"
                        prop="projectname"
                        style="margin-top: -10px"
                        v-if="taskName != '云服务商处理'"
                    >
                        <span
                            v-for="(item, index) in configure.wlfwqList"
                            :key="index"
                            v-show="ljsform.cloudFlavorCode == item.code"
                            >{{ item.remark }}</span
                        >
                    </el-form-item>
                    <el-form-item
                        label="操作系统:"
                        v-if="taskName != '云服务商处理'"
                        prop="osType"
                    >
                        <el-select
                            style="width: 200px"
                            v-model="ljsform.osType"
                            @change="cascaderChange($event,'ljsform')"
                            placeholder="请选择操作系统版本"
                            size="mini"
                        >
                            <el-option
                                v-for="item in this.configure.czxtList"
                                :key="item.serviceNumber"
                                :label="item.serviceName"
                                :value="item.serviceNumber"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="操作系统版本:"
                        v-if="taskName != '云服务商处理'"
                        prop="osServerCode"
                    >
                        <!-- 请选择操作系统版本 -->
                        <el-select
                            v-model="ljsform.osServerCode"
                            @change="ChangeCzxtVersion($event, 'ljsform')"
                            placeholder="请选择操作系统版本"
                            size="mini"
                            style="width: 200px;"
                        >
                            <el-option
                                v-for="item in this.CzxtVersion"
                                :key="item.code"
                                :label="item.serviceName"
                                :value="item.code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="数据盘:"
                        v-if="false"
                        v-show="taskName != '云服务商处理'"
                    >
                        <div>
                            <span
                                >你已选择<span style="color: #e83112">{{
                                    ljsform.disks.length
                                }}</span
                                >块，还可以选择<span style="color: #e83112">{{
                                    16 - ljsform.disks.length
                                }}</span
                                >块</span
                            >
                            <div
                                v-for="(item, index) in ljsform.disks"
                                :key="index"
                                style="
                                    margin-top: 10px;
                                    display: flex;
                                    line-height: 28px;
                                "
                            >
                                <a @click="ljsform.disks.splice(index, 1)"
                                    ><i class="el-icon-remove"></i
                                ></a>
                                <el-select
                                    v-model="item.diskServerCode"
                                    placeholder="请选择"
                                    size="mini"
                                    style="width: 160px"
                                >
                                    <el-option
                                        v-for="it in configure.ccList"
                                        :key="it.code"
                                        :label="it.serviceName"
                                        :value="it.code"
                                    >
                                    </el-option>
                                </el-select>
                                <el-input
                                    size="mini"
                                    style="width: 150px; margin-left: 20px"
                                    v-model="cpform.dataDiskSize"
                                ></el-input
                                >GB
                            </div>
                            <div
                                style="
                                    margin: 10px 0;
                                    display: flex;
                                    line-height: 28px;
                                "
                            >
                                <a
                                    v-show="ljsform.disks.length < 16"
                                    @click="
                                        ljsform.disks.push({
                                            diskServerCode:
                                                configure.ccList[0].code,
                                            dataDiskSize: 500,
                                        })
                                    "
                                >
                                    <i
                                        class="el-icon-circle-plus"
                                        style="color: #3a8dfd"
                                    ></i>
                                </a>
                                <span v-show="ljsform.disks.length < 16"
                                    >增加一块数据盘</span
                                >
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item
                        v-show="!editFlag"
                        label="主机别名:"
                        prop="instanceName"
                        v-if="taskName != '云服务商处理'"
                    >
                        <el-input
                            style="width: 200px"
                            placeholder="请输入"
                            v-model="ljsform.instanceName"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        v-show="!editFlag"
                        label="数量(1~50):"
                        prop="instanceNum"
                        v-if="taskName != '云服务商处理'"
                    >
                        <el-input
                            style="width: 200px"
                            size="mini"
                            type="number"
                            min="1"
                            max="50"
                            placeholder="请输入申请的服务器数量"
                            v-model="ljsform.instanceNum"
                        >
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div
                v-show="typeIndex == 2"
                style="padding: 20px 20px; width: 100%"
            >
                <el-form
                    :model="sjkform"
                    :rules="sjkrules"
                    ref="sjkform"
                    label-width="100px"
                >
                    <el-form-item label="类型:">
                        <el-radio-group v-model="sjkform.serverCode">
                            <el-radio
                                v-for="(item, index) in configure.sjkList"
                                :key="index"
                                :label="item.code"
                                >{{ item.serviceName }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- <el-form-item label="版本:">
                        <el-radio-group v-model="sjkform.databaseVersion">
                            <el-radio label="SQL Server 2019"
                                >SQL Server 2019</el-radio
                            >
                            <el-radio label="SQL Server 2017"
                                >SQL Server 2017</el-radio
                            >
                            <el-radio label="SQL Server 2016"
                                >SQL Server 2016</el-radio
                            >
                            <el-radio label="SQL Server BI"
                                >SQL Server BI</el-radio
                            >
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item label="位数:">
                        <el-radio-group v-model="sjkform.systemDigits">
                            <!-- <el-radio label="32位">32位</el-radio> -->
                            <el-radio label="64位">64位</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="服务器:" prop="hostId">
                        <el-select
                            v-model="sjkform.hostId"
                            placeholder="请选择"
                            size="mini"
                            style="width: 200px"
                        >
                            <el-option
                                v-for="item in hosts"
                                :key="item.id"
                                :disabled="item.changeTo&&item.changeTo.insStatus == 'REMOVE'"
                                :label="EchoName(item)"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

            <div
                v-show="typeIndex == 3"
                style="padding: 20px 20px; width: 100%"
            >
                <el-form
                    :model="cpform"
                    :rules="cprules"
                    ref="cpform"
                    label-width="100px"
                >
                    <el-form-item label="存储类型:">
                        <el-radio-group
                            v-model="cpform.productCode"
                            @change="productCodeChange"
                        >
                            <el-radio label="共享型">共享型</el-radio>
                            <el-radio label="服务型">服务型</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="服务类型:">
                        <el-radio-group v-model="cpform.diskCode">
                            <el-radio
                                :label="
                                    cpform.productCode == '共享型'
                                        ? '共享存储'
                                        : '视频云存储'
                                "
                                >{{
                                    cpform.productCode == "共享型"
                                        ? "共享存储"
                                        : "视频云存储"
                                }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="磁盘:">
                        <div style="display: flex">
                            <el-select
                                v-model="cpform.diskServerCode"
                                placeholder="请选择"
                                size="mini"
                                style="width: 200px"
                            >
                                <el-option
                                    v-for="item in cpform.productCode ==
                                    '共享型'
                                        ? configure.ccList
                                        : configure.fwcpList"
                                    :key="item.code"
                                    :label="item.serviceName"
                                    :value="item.code"
                                >
                                </el-option>
                            </el-select>
                            <!-- <el-select v-model="cpform.dataDiskSize" placeholder="请选择" size="mini"
                style="width: 200px;margin: 0 10px;">
                <el-option v-for="item in [1,2,3,4]" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>TB -->
                            <el-input
                                size="mini"
                                maxlength="7"
                                style="width: 150px; margin-left: 20px"
                                v-model="cpform.dataDiskSize"
                            ></el-input
                            >GB
                        </div>
                    </el-form-item>
                    <el-form-item
                        label="服务器:"
                        prop="hostIds"
                        v-if="cpform.productCode == '共享型'"
                    >
                        <el-select
                            v-model="cpform.hostIds"
                            multiple
                            clearable
                            placeholder="请选择"
                            size="mini"
                            style="width: 410px"
                        >
                            <el-option
                                v-for="item in hosts"
                                :key="item.id"
                                :disabled="item.changeTo&&item.changeTo.insStatus == 'REMOVE'"
                                :label="EchoName(item)"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div
                v-show="typeIndex == 4"
                style="padding: 20px 20px; width: 100%"
            >
                <div class="wrap_title">
                    <!-- <div>安全产品</div> -->
                </div>
                <div style="padding: 20px 20px">
                    <div
                        class="wrap_item"
                        style="margin-top: 0; display: block"
                    >
                        <el-checkbox
                            :indeterminate="isIndeterminate"
                            v-model="checkAll"
                            @change="handleCheckAllChange"
                            >全选
                        </el-checkbox>
                        <div style="margin: 15px 0"></div>
                        <el-checkbox-group
                            v-model="aqform"
                            @change="handleCheckedChange"
                        >
                            <el-checkbox
                                v-for="item in configure.yyaqList"
                                :label="item.code"
                                :key="item.code"
                                >{{ item.serviceName }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import { serviceByClazz,specEcs } from "@/api/resources/apply";
export default {
    name: "ChangeaddBdialogsToDo",
    components: {},
    props: {
        configure: {
            type: Object,
            default: {
                available_domain: [], //可用域
                cloud_service_provider: [], //服务商
                storage_type: [], //系统盘类型
                codeList: [], //云服务器规格列表
                czxtList: [], //操作系统列表
                ccList: [], //数据盘类型
                fwcpList: [], //服务型磁盘类型
                wlfwqList: [], //高性能服务器资源类型
                sjkList: [], //数据库类型
                SpecificationsList:[]
            },
        },
        hosts: {
            type: Array,
            default: [],
        },
        addShow: {
            type: Number,
            default: 1,
        },
        taskName: {
            type: String,
            default: "",
        },
        supplierCode: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            CzxtVersion: [], //操作系统版本
            isIndeterminate: false,
            yyaqList: null,
            checkAll: false,
            //是否是修改
            editFlag: false,
            //资源类型
            types: [
                {
                    name: "云服务器",
                    code: "yzj",
                },
                {
                    name: "高性能服务器",
                    code: "wlfwq",
                },
                {
                    name: "数据库",
                    code: "sjk",
                },
                {
                    name: "存储产品",
                    code: "cc",
                },
                {
                    name: "安全产品",
                    code: "aq",
                },
            ],
            typeIndex: 5,
            //云服务器数据
            form: {
                flavorType: 1, //主机类型 1 虚拟化主机 2 高性能物理机
                availableDomain: "", //可用域
                cloudFlavorCode: "", //规格分类

                cpuNumber: "", //CPU核数
                memorySize: "", //内存条容量
                Specifications:'',
                osDisk: {
                    diskServerCode: "",
                    dataDiskSize: "",
                }, //系统盘

                osServerCode: "", //操作系统code
                osName: "", //操作系统名称

                disks: [], //数据盘列表
                instanceName: "云服务器", //主机名称
                instanceNum: 1, //数量
            },
            //高性能服务器数据
            ljsform: {
                flavorType: 2, //主机类型 1 虚拟化主机 2 高性能物理机
                availableDomain: "", //可用域
                cloudFlavorCode: "", //资源类型

                osServerCode: "", //操作系统code
                osName: "", //操作系统名称
                disks: [], //数据盘列表
                instanceName: "高性能服务器", //主机名称
                instanceNum: 1, //数量
            },
            //数据库数据
            sjkform: {
                serverCode: "", //数据库类型
                databaseVersion: "", //数据库版本
                systemDigits: "64位", //位数
                hostId: "", //服务器
            },
            //存储产品数据
            cpform: {
                productCode: "共享型", //存储类型
                diskCode: "共享存储", //服务类型
                diskServerCode: "", //磁盘类型
                dataDiskSize: 1, //磁盘大小
                hostIds: [], //服务器
            },
            aqform: [],
            rules: {
                instanceName: [
                    {
                        required: true,
                        message: "请输入主机别名",
                        trigger: "blur",
                    },
                ],
                instanceNum: [
                    {
                        required: true,
                        message: "请输入申请的服务器数量",
                        trigger: "blur",
                    },
                ],
                Specifications:[
                    {
                        required: true,
                        message: "请选择规格",
                        trigger: "change",
                    },
                ],
                osType:[
                    {
                        required: true,
                        message: "请选择操作系统",
                        trigger: "change",
                    },
                ],
                osServerCode:[
                    {
                        required: true,
                        message: "请选择操作系统版本",
                        trigger: "change",
                    },
                ],
            },

            ljsrules: {
                instanceName: [
                    {
                        required: true,
                        message: "请输入主机别名",
                        trigger: "blur",
                    },
                ],
                instanceNum: [
                    {
                        required: true,
                        message: "请输入申请的服务器数量",
                        trigger: "blur",
                    },
                ],
                osType:[
                    {
                        required: true,
                        message: "请选择操作系统",
                        trigger: "change",
                    },
                ],
                osServerCode:[
                    {
                        required: true,
                        message: "请选择操作系统版本",
                        trigger: "change",
                    },
                ],
            },
            sjkrules: {
                hostId: [
                    {
                        required: true,
                        message: "请选择服务器",
                        trigger: "change",
                    },
                ],
            },
            cprules: {
                hostIds: [
                    {
                        required: true,
                        message: "请选择服务器",
                        trigger: "change",
                    },
                ],
            },

            radio: "1",

            radio1: "1",
            options: ["分布式存储", "1", "2", "3", "4", "5"],
            selectValue: "",

            options2: [
                {
                    value: "win",
                    label: "windows",
                    children: [
                        {
                            value: "win7",
                            label: "win7",
                        },
                        {
                            value: "win10",
                            label: "win10",
                        },
                    ],
                },
            ],
            value: "",
            shujupan: [],
            hulianwang: [],
            wangkapeizhi: [],
            duankou: [],
            checked1: false,
            checked2: false,
            checked3: false,
            demoList: [
                {
                    a: "浪潮云",
                    j: "云服务器",
                    b: 4,
                    c: 8,
                    d: 8,
                    e: 128,
                    f: "分布式存储",
                    g: `windows/win10`,
                    h: ["分布式存储，4GB，数量：2", "分布式存储，8GB，数量：3"],
                    i: 1,
                },
            ],
        };
    },
    created() {
        // 获取信创CPU或者内存规格
    //   specEcs({Inspur:this.supplierCode}).then(res=>{
    //     this.SpecificationsList = res.rows
    //   })
    },
    methods: {
		inputNumber(e){
		  let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value)
		  if(!boolean){
		    this.$message.warning("请输入正整数")
		    e.target.value=''
		  }
		},
        cloudFlavorCodes(val) {
            return;
            this.configure.codeList.some((item) => {
                if (val == item.specCode) {
                    item.details.forEach((it) => {
                        if (it.serviceCode == "vcpu") {
                            this.form.cpuNumber = it.serviceCount;
                            this.form.cpuServerCode = it.serviceCode;
                        }
                        if (it.serviceCode == "memory") {
                            this.form.memorySize = it.serviceCount;
                            this.form.memoryServerCode = it.serviceCode;
                        }
                    });
                    return;
                }
            });
        },
        // 云服务器规格选择
        ChangeSpecifications(val) {
            this.configure.SpecificationsList.forEach((item) => {
                if (item.specName == val) {
                 this.form.Specifications = val
                 this.form.cpuServerCode = item.cpuCode;
                 this.form.memoryServerCode = item.memoryCode;
                 if(val!='自定义'){
                   this.form.cpuNumber = item.cpuNumber
                   this.form.memorySize = item.memorySize
                 }
                }
            });
            this.$forceUpdate();
        },
        handleCheckAllChange(val) {
            if (!this.yyaqList) {
                this.yyaqList = this.configure.yyaqList.map((item) => {
                    return item.code;
                });
            }
            this.aqform = val ? this.yyaqList : [];
            this.isIndeterminate = false;
        },
        handleCheckedChange(value) {
            // console.log(value.length,99)
            // return
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.configure.yyaqList.length;
            this.isIndeterminate =
                checkedCount > 0 &&
                checkedCount < this.configure.yyaqList.length;
        },
        // 回显服务器名称
        EchoName(item) {
            if (item.hostName) {
                if (item.existOnRep == true) {
                    return item.hostName + "（已存在）";
                } else {
                    return item.hostName;
                }
            } else {
                if (item.existOnRep == true) {
                    return item.instanceName + "（已存在）";
                } else {
                    return item.instanceName;
                }
            }
        },
        //提交
        submit() {
            let formName =
                this.typeIndex == 0
                    ? "form"
                    : this.typeIndex == 1
                    ? "ljsform"
                    : this.typeIndex == 2
                    ? "sjkform"
                    : "cpform";
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (
                        this.addShow == 1 &&
                        !this[formName].id &&
                        (this.typeIndex == 0 || this.typeIndex == 1)
                    ) {
                        this[formName].id = uuidv4();
                    }
                    if (this.typeIndex == 4) {
                        this.$emit(
                            "addTable",
                            JSON.parse(JSON.stringify(this.aqform))
                        );
                    } else {
                        this.$emit(
                            "addTable",
                            JSON.parse(JSON.stringify(this[formName]))
                        );
                    }
                } else {
                    return false;
                }
            });
        },
        //获取操作系统名称
        cascaderChange(data, name) {
            if(name){
                this[name].osServerCode = ''
                this[name].osName = ''
            }
            serviceByClazz({ code: data, supplier: this.supplierCode }).then(
                (res) => {
                    this.CzxtVersion = res.data;
                }
            );
        },
        // 选择指定操作系统
        ChangeCzxtVersion(val, name) {
            this.CzxtVersion.forEach((item) => {
                if (item.code == val) {
                    this[name].osServerCode = item.code;
                    this[name].osName = item.serviceName;
                }
            });
        },
        //存储类型变化
        productCodeChange(e) {
            if (e == "共享型") {
                this.cpform.diskServerCode = this.configure.ccList[0].code;
                this.cpform.diskCode = "共享存储";
            } else {
                this.cpform.diskServerCode = this.configure.fwcpList[0].code;
                this.cpform.diskCode = "视频云存储";
            }
        },
        //初始化
        init(data) {
            // this.$refs.form.resetFields()
            // this.$refs.ljsform.resetFields()
            // this.$refs.sjkform.resetFields()
            // this.$refs.cpform.resetFields()
            this.editFlag = false;
            if (data) {
                this.editFlag = true;
                if (data.flavorType == 1) {
                    if (!data.instanceNum) {
                        data.instanceNum = 1;
                    }
                    this.typeIndex = 0;
                    this.form = data;


                    this.form.Specifications='自定义'
                    this.configure.SpecificationsList.forEach(item=>{
                        if(item.cpuNumber == this.form.cpuNumber && item.memorySize == this.form.memorySize){
                            this.form.Specifications = item.specName
                        }
                    })


                    this.cascaderChange(this.form.osType);
                } else if (data.flavorType == 2) {
                    if (!data.instanceNum) {
                        data.instanceNum = 1;
                    }
                    this.typeIndex = 1;
                    this.ljsform = data;
                    this.cascaderChange(this.ljsform.osType);
                } else if (data.serverCode) {
                    this.typeIndex = 2;
                    this.sjkform = data;
                } else if (data.diskServerCode) {
                    this.typeIndex = 3;
                    this.cpform = data;
                    if (!data.hostIds || !data.hostIds.length) {
                        if (data.hosts && data.hosts.length) {
                            this.cpform.hostIds = [];
                            data.hosts.forEach((i) => {
                                this.cpform.hostIds.push(i.id);
                            });
                        }
                    }
                }
            } else {
                this.form.availableDomain =
                    this.configure.available_domain[0].dictValue;
                this.form.cloudFlavorCode = this.configure.codeList
                    ? this.configure.codeList[0].specCode
                    : "";
                // 分布式存储、文件存储
                this.configure.storage_type.forEach((item) => {
                    if (item.serviceName == "分布式存储、文件存储") {
                        this.form.osDisk = {
                            diskServerCode: item.code,
                            dataDiskSize: 160,
                        };
                    }
                });

                // this.form.osServerCode = this.configure.czxtList[0].code;
                this.form.osType = this.configure.czxtList[0].serviceNumber;

                this.ljsform.availableDomain =
                    this.configure.available_domain[0].dictValue;
                this.ljsform.cloudFlavorCode = this.configure.wlfwqList[0].code;
                this.ljsform.osServerCode = this.configure.czxtList[0].code;

                this.sjkform.serverCode = this.configure.sjkList[0].code;
                if (this.hosts.length) {
                    this.sjkform.hostInstanceName = this.hosts[0].hostName;
                }

                this.cpform.diskServerCode = this.configure.ccList[0].code;
                this.ChangeSpecifications(this.configure.SpecificationsList[0].specName)
                this.cascaderChange(this.form.osType);
            }
        },
    },
};
</script>
<style>
.el-form-item--medium .el-form-item__label {
    text-align: left !important;
}
</style>
<style scoped lang="less">
.dialog {
    // max-height: calc(75vh - 160px);
    padding-right: 20px;

    // overflow-y: scroll;
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }

    i {
        line-height: 28px;
        margin-right: 10px;
        font-size: 20px;
        color: #e83112;
    }

    .wrap {
        display: flex;
        background: #faf9ff;
        margin-top: 20px;
        border-radius: 10px;

        .wrap_title {
            padding: 0 10px;
            background: #f4f4f4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;

            div {
                height: 100%;
                width: 14px;
                font-weight: bold;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

        .wrap_item {
            display: flex;
            margin-top: 20px;

            div:first-child {
                width: 90px;
                font-weight: bold;
            }
        }
    }

    .msg {
        padding: 0 20px 20px 0px;
        background: #faf9ff;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        border-radius: 10px;

        .wra2p {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .item {
            margin-left: 20px;
            width: calc(33.33% - 20px);
            min-width: 340px;
            display: flex;
        }
    }
}
</style>
